﻿<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <title>潜在客户报表查询</title>
    <!--freemarker引入模板文件 使用相对路径来引入的-->
    <%@include file="../common/link.jsp" %>
    <style>
        #showview{
            display: none;
            position: fixed;
            z-index: 100;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,.5);
        }
        #view{
            position: absolute;
            width:600px;
            heigth:400px;
            margin: 20% 50%;
            transform: translate(-50%,-50%);

        }
        #closebtn{
            position: absolute;
            top: 26%;
            right: 20%;
            display: inline-block;
            background-color: #fff;
            padding: 5px;
        }
    </style>
    <script>
//        function close(){
//            $("#view").html("");
//            $("#showview").hide();
//        }
        $.draw=function(str,f){
            if(!(str.length>2)) {
                alert("没有相关查询结果");
                return;}
            if(str){
                $("#tablelist").html("");

                $("#tablelist").append("<tr><th>分组类型</th>" + "<th>潜在客户新增数</th></tr>")
                var list=str
                list=list.substring(2,list.length-2)
                console.log(list)
                list=list.replace(/}/g,"￥")
                list=list.replace(/{/g,"￥")
                list=list.replace(/￥/g,"").split(",")
                console.log(list)
                for(var i=0;i< list.length/2;i++){
                    console.log(list[i*2])
                    var number=list[i*2]=list[i*2].split(f)[1]

                    var groupType=list[i*2+1]=list[i*2+1].split(f)[1]
                    $("#tablelist").append( "<tr><td>"+groupType+"</td><td>"+number+"</td></tr>")
                }
            }

        }

        $(function () {



//
           //$("#showview").hide()

           $.draw('${result.list}',"=")
//

            $("#searchForm").submit(function(){
                return false;
            })
//            点击查询
            $("#btn_query").click(function(){
                var data={}
                var t = $('#searchForm').serializeArray();


                $.each(t, function() {
                    data [this.name] = this.value;
                });
                data=JSON.stringify(data);
                $.ajax({
                    /* url 地址可以是 /get-json/ 的方式
                    *  也可以是 http://www.qfedu.com/get-json/ 的方式
                    */
                    url: '/customerReport/querylist',
                    type: 'POST',
                    contentType: "application/json;charset=UTF-8",
                    dataType: 'text',
                   // data: JSON.stringify(data),
                    data: data,
                    success: function(res){
                        console.log(JSON.parse(res))
                        $.draw(res,":")

                    },
                    error: function(res){
                        alert("没有相关查询结果");
                    }
                });
            })


            //图
            $("#btn-info").click(function(){
                $.get("/customerReport/listByBar",{},function(res){
                    //alert(res)
                    $("#view").html("")
                    $("#view").html(res)
                    $("#showview").show();
                    //$(".closebtn").click($.close())

                })
            })
            $("#btn-warning").click(function(){
                $.get("/customerReport/listByPie",{},function(res){
                    //alert(res)
                    $("#view").html("")
                    $("#view").html(res)
                    $("#showview").show();
                    $("#showview").append("")

                })
            })
//            $("#btn-warning").click(function(){
//                $.get("/customerReport/listByPie",{},function(){
//                    $("#showview1").show()
//                })
//            })
            $("#closebtn").click(function(){
                    $("#view").html("");
                   $("#showview").hide();
            }

            )





        })




    </script>
</head>
<body class="hold-transition skin-blue sidebar-mini">
<div class="wrapper">
    <!--页面头部-->
    <%@include file="../common/navbar.jsp" %>
    <!--菜单回显 声明变量设置值-->
    <c:set var="currentMenu" value="department"/>
    <!--菜单-->
    <%@ include file="../common/menu.jsp" %>
    <div class="content-wrapper">
        <section class="content-header">
            <h1>潜在客户报表查询</h1>
        </section>
        <section class="content">
            <div class="box">
                <div style="margin: 10px;">
                <!--高级查询--->
                <form class="form-inline" id="searchForm" action="/customerReport/list.do" method="post" enctype="multipart/form-data">
                    <input type="hidden" name="currentPage" id="currentPage" value="1">
                    <div class="form-group">
                        <label for="keyword">员工姓名:</label>
                        <input type="text" class="form-control" id="keyword" name="keyword" value="${qo.keyword}">
                    </div>
                    <div class="form-group">
                        <label>时间段查询:</label>
                        <div class="input-daterange input-group" id="datepicker">
                            <input type="date" class="input-sm form-control" id="beginDate" name="beginDate"
                                   value="${qo.beginDate}"  pattern
                                           ="yyyy-MM-dd" />
                            <span class="input-group-addon">to</span>
                            <input type="date" class="input-sm form-control" id="endDate" name="endDate"
                                   value="${qo.endDate}" pattern
                                           ="yyyy-MM-dd" />
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="status">分组类型:</label>
                        <select class="form-control" id="groupType" name="groupType">
                            <option value="e.name">员工</option>
                            <option value="DATE_FORMAT(c.input_time, '%Y')">
                                年
                            </option>
                            <option value="DATE_FORMAT(c.input_time, '%Y-%m')">
                                月
                            </option>
                            <option value="DATE_FORMAT(c.input_time, '%Y-%m-%d')">
                                日
                            </option>
                        </select>
                        <script>
                            $("#groupType").val("${qo.groupType}")
                        </script>
                    </div>

                    <button type="button" id="btn_query" class="btn btn-primary">
                        <%--id="btn_query"--%>
                        <span class="glyphicon glyphicon-search"></span> 查询
                    </button>

                    <button type="button" id="btn-info" class="btn btn-info btn-chart" data-url="/customerReport/listByBar.do">
                        <span class="glyphicon glyphicon-stats"></span> 柱状图
                    </button>
                    <button type="button" id="btn-warning" class="btn btn-warning btn-chart"  data-url="/customerReport/listByPie.do">
                        <span class="glyphicon glyphicon-dashboard"></span> 饼状图
                    </button>

                </form>
                </div>
                <!--编写内容-->
                <div class="box-body table-responsive no-padding ">

                    <table class="table table-hover table-bordered" id="tablelist">
                        <tr>
                            <th>分组类型</th>
                            <th>潜在客户新增数</th>
                        </tr>
                            <%--<c:forEach items="${result.list}" var="map" varStatus="vs">--%>
                                  <%--<tr>--%>
                                      <%--<!--freemarker 如果取值时是空值 会报错-->--%>
                                      <%--<td>${map.groupType}</td>--%>
                                      <%--<td>${map.number}</td>--%>
                                  <%--</tr>--%>
                            <%--</c:forEach>--%>
                    </table>
                    <!--分页-->
                    <%@include file="../common/page.jsp" %>
                </div>
            </div>
        </section>
    </div>
     <%@include file="../common/footer.jsp" %>
</div>

<div id="showview">
    <div id="view"></div>
    <button  id="closebtn">关闭</button>
    <%--<button onclick="close()">关闭</button>--%>
    <%--<%@include file="../customerReport/listByBar.jsp" %>--%>
</div>
<%--<div id="showview1">--%>
    <%--<%@include file="../customerReport/listByPie.jsp" %>--%>
<%--</div>--%>




</body>
</html>
